<template>
	<view class="content">
		<view class="contentAll">
		<view class="NoPay">
			<text>待付款</text>
		</view>
		
		<navigator url="../goodchoice/goodchoice">
		<view class="content1">
			<view class="contentL" >
				<image :src="img" mode="" style="width: 216rpx; height: 164rpx; border-radius: 30rpx;"></image>
			</view>
			<view class="contentR">
				<span style="font-size: 32rpx;" >{{name}}</span>
				<p>入住时间：{{time}}</p>
			</view>
		</view>
		</navigator>
		
		<view class="content2">
			 <view class="priceTop">
			 	价格详情
			 </view>
			 
			<view class="pricetent">
				<view class="pricetent1">
					<image :src="img" mode="" style="width: 128rpx; height: 128rpx; border-radius: 30rpx;"></image>
				<view class="pricetent2">
					<span>{{productName}}</span>
					<p>{{productNum}}</p>
				</view>
				</view>
				
				<view class="price" style="color:#FF9800">
					<text>￥{{totalPrice}}</text>
				</view>
			</view>
			<view class="priceBottom">
				<text style="padding-left: 175rpx;">优惠</text>
				<span style="color:#eb8900;margin-right: 20rpx;" >-￥{{discounts}}</span>
			</view>
				
			<view class="priceBottomP">
				<p style="color:#eb0000;">￥{{total}}</p>
			</view>
			<view class="option">
				<span><a href="#">{{cancel}}</a></span>
				<span style="border: 4rpx solid #ffaa00; color: #F0AD4E;">
					<navigator url="../../pages2/confirmorder/confirmorder">	
						<a href="#">{{pay}}</a>
					</navigator>
					</span>
			</view>
		</view>
		<view class="footer">
			<view class="priceTop">
				订单详情
			</view>
			<view class="footerTent">
				<p>订单编号：{{oderNum}}</p>
				<p>创建时间：{{odertime}}</p>
				<p>付款时间：{{paytime}}</p>
				<p>获得积分：{{score}}</p>
			</view>
		</view>
		<view class="AD">
			<image :src="imgAd"  mode=""></image>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					obligation:'',
					readPay:'已完成',
					img:('https://www.zhuinw.com/uploads/20210816/ef73469fd86f19ac1fba0b540502c42f.jpg'),
					name:'',
					time:'3月24日至3月26日',
					productName:'精品养老',
					productNum:'x2',
					totalPrice:1550,
					discounts:50,
					total:1500,
					oderNum:'HSD5623662515695234',
					odertime:'2022/3/20 12:00',
					paytime:'2022/3/20 12:00',
					score:10,
					cancel:'取消订单',
					pay:'立即支付',
					imgAd:('../../static/indent_images/AD_01.png')
			}
		},
		
		methods: {
			click(item) {
				console.log('item', item);
			}
		},
		// onLoad(option){
		// 	// var odertData = JSON.parse(option.Data); // 字符串转对象
		// 	//    console.log(odertData)
		// 	//    this.name=odertData.name;
		// 	   var odertData = JSON.parse(option.Data); // 字符串转对象
		// 	   console.log(odertData)
			  
		// },
		
	}
</script>

<style lang="scss" scoped>
	.contentAll{
		background-color: #f9f9f9;
		height: 100%;
	}
	.NoPay{
		background-color: #eef2f7;	//待付款
		text-align: center;
		width: 100%;
		height: 150rpx;
		line-height: 150rpx;
		color: #1968d1;
	}
	.content1{ 						//养老院
		display: flex;
		height:160rpx;
		width: 100%;
		background-color: #ffffff;
		padding: 50rpx 20rpx 50rpx 20rpx ;
	}
	.contentR{
		padding-left: 30rpx;
		padding-top: 10rpx;
	}
	.contentR p{
		color: #999999;
		margin-top: 50rpx;
		font-size: 28rpx;
	}
	
	.content2{
		margin-top: 15rpx;
		background-color: #ffffff;    //价格详情
		padding-bottom: 2%;
		
	}
	.priceTop{
		height: 80rpx;
		line-height: 80rpx;
		width: 96%;
		margin-left: 20rpx;
		
		margin: 0 auto;
		border-bottom: 2rpx solid #f3f3f3;
	}
	
	.pricetent{
		display: flex;
		width: 100%;
		padding: 20rpx 20rpx 20rpx 20rpx;
		justify-content: space-between;
		
	}
	
	.pricetent1{
		width: 100%;
		padding: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
	}
	.pricetent2{
		padding-left: 5%;
		padding-top: 3%;
		font-size: 32rpx;
	}
	.pricetent2 p{
		color: #999999;
		margin-top: 5%;
		font-size: 28rpx;
	}
	.price{
		padding-top: 30rpx;
	}
	.price>text{
		padding-right:40rpx;
	}
	
	.priceBottom{
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
	}
	
	.priceBottomP{
		width: 100%;
		
		display: flex;
		justify-content: flex-end;
		
	}
	.priceBottomP p{
		margin-right: 20rpx;
		font-size: 32rpx;
	}
	
	.option{
		padding-top: 30rpx;
		display: flex;
		font-size: 32rpx;
		justify-content: flex-end;
	}
	.option span{
		font-size: 32rpx;
		width: 160rpx;
		height: 60rpx;
		border: 4rpx solid #f3f3f3;
		text-align: center;
		line-height:60rpx;
		border-radius: 15rpx;
		margin-right: 18rpx;
	}
	.footer{                  //订单详情
		background-color: #ffffff;
		height: 300rpx;
		margin-top: 50rpx;
	}
	.footerTent{
		
		padding-left: 15rpx;
		line-height: 50rpx;
	}
	.AD{                       //广告
 		height: 140rpx;
		padding-top: 30rpx;
		width: 95%;
		margin:  0 auto;
	}
	.AD image{
		height: 140rpx;
		width: 100%;
		border-radius: 30rpx;
	}
</style>
